<template>
  <div :class="item.config.class" v-if="notes && notes.length">
    <template v-if="item.config['model'] == 'appModel3'">
      <div class="notes-title-content flex-normal">
        <div class="title-content flex-center">        
          <span :prop-data="getModelItemConfig('title')" 
          class="title-txt" @click.stop="editModel(item['title'])"
          :style="{
            'font-family': setAttr(item['title'], 'fontFamily'),
            'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['title'], 'color'),
          }">{{ setAttr(item['title'], 'text')}}</span>
        </div>
      </div>
      <div class="notes-content" :style="{
        'background-color': item.configH5['backgroundColor'],
        'border-radius': $px2rem(`${item.configH5['borderRadius']}px`),
      }" @click.stop.prevent="editModel(item)">
        <div class="notes-list"  :prop-data="getModelItemConfig('notes')"
          :style="{
            'font-family': setAttr(item['notes'], 'fontFamily'),
            'font-size': item['notes'] ? $px2rem(`${item['notes'].configH5['fontSize']}px`) : '',
            'color': setAttr(item['notes'], 'color'),
          }" @click.stop.prevent="editModel(item['notes'])">
          <div class="model-item" v-for="(note, index) in notes" :key="note">{{index + 1}}、{{ note }}</div>
        </div>
      </div>
    </template>
    <template v-if="item.config['model'] == 'appModel5'">
      <div class="model-5-content">
        <div class="title-content flex-center">
          <span :prop-data="getModelItemConfig('title')" 
            class="title-txt" @click.stop="editModel(item['title'])"
            :style="{
              'font-family': setAttr(item['title'], 'fontFamily'),
              'font-size': item['title'] ? $px2rem(`${item['title'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['title'], 'color'),
            }">{{ setAttr(item['title'], 'text')}}</span>
        </div>
        <div class="notes-content">
          <div class="notes-list" :prop-data="getModelItemConfig('notes')"
            :style="{
              'font-family': setAttr(item['notes'], 'fontFamily'),
              'font-size': item['notes'] ? $px2rem(`${item['notes'].configH5['fontSize']}px`) : '',
              'color': setAttr(item['notes'], 'color'),
            }" @click.stop.prevent="editModel(item['notes'])">
            <div class="note-item flex-normal" v-for="(note, index) in notes" :key="note">
              <span class="note-index flex-center">0{{ index + 1 }}</span>
              <span class="note-txt">{{ note }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import mixin from '../mixin'
import { notesModel } from '@/formgen/components/FormConfig/model-config'
import { mapGetters } from 'vuex'
export default {
  name: 'DNotes',
  mixins: [mixin],
  computed: {
    ...mapGetters(['vuex_activity', 'vuex_h5Config']),
    notes(){
      let _self = this, {remarks = ''} = this.vuex_activity
      let arr = (remarks || '').split(/[(\r\n)\r\n]+/), list = []
      arr.forEach((i, idx) => {
        if(i.trim() != ''){
          list.push(i)
        }
      })
      if(!list || !list.length){
        this.$set(this.item, 'isHiddenBtn', true)
      }
      return list
    },
  },
  data(){
    return {
      notesModel: JSON.parse(JSON.stringify(notesModel)),
    }
  },
  methods: {
    setAttr(config, key){
      if(!config) return null
      return config.configH5[key]
    },
    getModelItemConfig(key){
      let _self = this
      let {model} = _self.item.config
      let config = _self.notesModel[model][key]
      _self.$set(_self.item, key, config)
    },
    editModel(item){
      this.$emit('edit-model', item)
    }
  },
}
</script>

<style scoped lang="scss">
  .app-model-3.notes-model{
    position: relative;
    padding-top: rem(50);
    .notes-title-content{
      min-width: rem(310);
      height: rem(85);
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      background-color: #FECD8A;
      border-radius: rem(10);
      .title-content{
        position: relative;
        flex: 1;
        &::after, &::before{
          content: '';
          position: absolute;
          width: rem(14);
          height: rem(14);
          top: 50%;
          transform: translateY(-50%);
          background-color: #fff;
          border-radius: 50%;
        }
        &::before{
          left: rem(50);
        }
        &::after{
          right: rem(50);
        }
      }
    }
    .notes-content{
      padding: rem(70) rem(40) rem(30);
      .model-item{
        margin-bottom: rem(10);
      }
    }
  }
  .app-model-5.notes-model{
    .model-5-content{
      border-radius: rem(10);
      box-shadow: rem(3) 0 rem(7) 0 #1863B2;
      .title-content{
        height: rem(137);
        background: url('/static/image/app-model-5/title-bg.png') no-repeat center;
        background-size: contain;
        font-weight: bold;
      }
      .notes-content{
        padding: rem(36);
        .note-item{
          position: relative;
          height: rem(98);
          background: linear-gradient(to bottom, #FFFFFF, #D1EEFE);
          border-radius: rem(12);
          border: rem(1) solid #3288CE;
          margin-bottom: rem(20);
          padding-left: rem(110);
          &:last-child{
            margin-bottom: 0;
          }
          .note-index{
            position: absolute;
            background: linear-gradient(to bottom, #1964B3, #47A5E3);
            height: rem(68);
            width: rem(68);
            border-radius: 50%;
            font-size: rem(21);
            color: #fff;
            font-weight: bold;
            top: 50%;
            transform: translateY(-50%);
            left: rem(20);
          }
        }
      }
    }
  }
</style>
